@charset "utf-8";
/**
 * Kalaisoo
 *
 * A lightweight no-framework framework written in PHP
 *
 * @package Kalaisoo
 * @author $Author: info@sah-company.com $
 */

/* occupy space for scrollbars to prevent visual jumpiness */
html {
	overflow-y: scroll;
	-webkit-font-smoothing: antialiased;
}

/**
 * Define the body
 *
 * Before wrapping things in divs use body as what was your old div#container. Apply all that
 * css here now, if possible.
 */
body {
	font-family: 'Helvetica Neue', 'Helvetiva', 'Arial', sans-serif;
	font-size: 120%;
	margin: 0;
	/*color: rgb(45, 45, 45);*/
	min-width: 768px;
}

/**
 * make sure these are blocked
 */
header,
footer,
article,
section,
nav,
div,
form,
fieldset {
	display: block;
	padding: 0;
	margin: 0;
}

header, article, footer, form {
	padding: 0 64px 0 64px;
}

div.row {
	margin-bottom: 0.77em;
}

section > h2 {
	display: none;
}

section.found {
	position: relative;
	width: 100%;
	float: left;
	clear: both;
}

section.found > h2 {
	margin: 0;
	margin-top: 0.33em;
	display: block;
	position: absolute;
	top: 0;
	right: 51%;
	font-size: 1em;
}

section.found article {
	margin-top: 0.33em;
	width: 49%;
	float: right;
	padding: 0;
	clear: both;
}

section.found article h1 {
	font-size: 1em;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: inherit;
	margin-right: 64px;
}

/* sticky footer */
html, body {
	height: 100%;
}

#wrap {
	min-height: 100%;
}

#main {
	width: 100%;
	position: relative;
	overflow: auto;
	padding-top: 64px;
	padding-bottom: 200px;
	/*background-color: rgb(254, 254, 254);*/
}

body > footer {
	position: relative;
	margin-top: -200px;
	height: 200px;
	clear: both;
	font-size: 0.8em;
}

/* logo of kalaisoo */
body > footer {
	text-align: center;
	-webkit-box-shadow: inset 0px 1em 1em rgba(0, 0, 0, .25);
	-moz-box-shadow: inset 0px 1em 1em rgba(0, 0, 0, .25);
	padding-top: 1.2em;
	background-color: rgb(252, 252, 252);
	color: gray;
}
body > footer > h1 {
	padding-top: 54px;
	background-image: url(logo.png);
	background-repeat: no-repeat;
	background-position: top center;
	-webkit-transform: rotate(-1.77deg);
}

body > footer > h2 {
	display: none;
}

body > footer > p {
	padding: 0;
}

/* user menu and toolbar */
header.user {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 1;
	-webkit-box-shadow: 0px 1em 1em rgba(0, 0, 0, .25);
	-moz-box-shadow: 0px 1em 1em rgba(0, 0, 0, .25);
	border-bottom: 1px solid gray;
	background-color: white;
	z-index: 10000;
	padding: 0;
}

header.user h1 {
	display: none;
}

header.user figure {
	margin: 0;
	padding: 0;
	width: 48px;
	height: 48px;
}

header.user figure img {
	border: 0;
}

nav.urhere {
	position: absolute;
	top: 0;
	left: 48px;
	height: 48px;
	overflow: hidden;
	padding: 0;
}

nav.main {
	background: white;
	display: none;
	position: absolute;
	left: 24px;
	top: 49px;
	font-size: 1em;
	padding: 0;
	-webkit-box-shadow: 0 1em 1em rgba(0, 0, 0, .3);
	-webkit-border-radius: 0 0 0.33em 0.33em;
	-moz-box-shadow: 0 1em 1em rgba(0, 0, 0, .3);
	-moz-border-radius: 0 0 0.33em 0.33em;
	border: 1px solid gray;
	border-top: none;
	padding-top: 0.33em;
	padding-bottom: 0.33em;
	opacity: 0.9;
}

nav.main h2,
nav.urhere h2 {
	display: none;
}

nav.main ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav.main li {
}

nav.main li a {
	display: block;
	color: #00a7ed;
	font-weight: bold;
	padding: 0.33em 1em;
	text-decoration: none;
}

nav.main li a:hover {
	background-color: #00a7ed;
	color: white;
}

nav.main li.hr {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px solid silver;
}

/* actions menu, looks like a button bar with first and last rounded edges */
nav.action {
	padding: 1em 0;
	clear: both;
	width: 100%;
	overflow: hidden;
}

nav.action form {
	padding: 0;
}

nav.action h2 {
	display: none;
}

nav.action hr {
	border: 0;
	width: 1em;
	height: 0;
}

nav.action ul {
	float: left;
	position: relative;
	left: 50%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

nav.action li {
	float: left;
	position: relative;
	right: 50%;
}

nav.action .left,
nav.action .right {
	position: absolute;
	left: 64px;
}

nav.action .right {
	left: auto;
	right: 64px;
}

nav.action ul.left li,
nav.action ul.right li {
	right: auto;
}

nav.action a.action {
	display: block;
	background-color: silver;
	color: white;
	font-size: 14px;
	font-weight: bold;
	padding: 0.5em 1em;
	text-decoration: none;
}

nav.action li:first-child a.action {
	-moz-border-radius: 1em 0 0 1em;
	-webkit-border-radius: 1em 0 0 1em;
	padding-left: 2em;
}

nav.action li:last-child a.action {
	-moz-border-radius: 0 1em 1em 0;
	-webkit-border-radius: 0 1em 1em 0;
	padding-right: 2em;
}

nav.action li:only-child a.action {
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	padding-right: 2em;
	padding-left: 2em;
}
/*
nav.action a.action:hover {
	background-color: rgb(45, 45, 45);
}
*/
nav.action.view a.action.view,
nav.action.add a.action.add,
nav.action.edit a.action.edit,
nav.action.delete a.action.delete,
nav.action.filter a.action.filter,
nav.action.run a.action.run,
nav.action.avatar a.action.avatar {
	background-color: gray;
}

nav.action.delete a.action.delete {
	background-color: red;
}

nav.action a.action.prev,
nav.action a.action.next {
	width: 1px;
	background: silver url(arrowLeft.png) no-repeat center;
}

nav.action a.action.next {
	background: silver url(arrowRight.png) no-repeat center;
}

nav.action a span {
	color: transparent;
	overflow: hidden;
}

section.tool.search {
	position: fixed;
	padding: 0;
	top: 13px;
	height: 48px;
	right: 64px;
	z-index: 10001;
}

section.tool.search h2 {
	display: none;
}

aside.tools {
	position: fixed;
	top: 0;
	right: 0;
	/*width: 100px;*/
	height: 48px;
	z-index: 10001;
}

aside.tools h2 {
	display: none;
}

aside.tools a#wrench {
	display: block;
	background: url(pencil.png) center no-repeat;
	color: transparent;
	width: 48px;
	height: 48px;
}

aside.tools div.workbench {
	background: white;
	display: none;
	position: absolute;
	right: 24px;
	top: 49px;
	font-size: 1em;
	padding: 0;
	-webkit-box-shadow: 0 1em 1em rgba(0, 0, 0, .3);
	-webkit-border-radius: 0 0 0.33em 0.33em;
	-moz-box-shadow: 0 1em 1em rgba(0, 0, 0, .3);
	-moz-border-radius: 0 0 0.33em 0.33em;
	border: 1px solid gray;
	border-top: none;
	padding-top: 0.33em;
	padding-bottom: 0.33em;
	opacity: 0.9;
	min-width: 480px;
}

div.workbench p {
	padding: 1em;
}

form#search {
	padding: 0;
	margin-bottom: 1em;
}

form#search label,
form#blog label {
	display: none;
}

form#search input[type="submit"] {
	display: none;
}

form#search {
	text-align: center;
}

section.form > header > h1,
section.list > h1 {
	display: none;
}

section.list article {
	margin: 0;
	padding: 0 64px 0 64px;
}

section.list article footer {
	display: none;
}

section.form > footer {
	text-align: center;
	padding: 2.33em;
	font-size: 0.8em;
	color: gray;
}

article.vcard header {
}

article.vcard header h1,
article.vcard header h2,
article.vcard header h3 {
	font-size: 1.5em;
	margin: 0;
	margin-left: 148px;
}

article.vcard header h2 {
	font-size: small;
}

article.vcard header figure {
	position: absolute;
	top: 1em;
	left: 1em;
	margin: 0;
}

article.vcard header figure img {
	width: 128px;
	height: 128px;
	-webkit-mask-image: url(circle.svg);
}

article.vcard section.list h3 {
	margin: 0;
}

article.vcard section.list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

article.vcard section.list ul li {
	display: inline-block;
	line-height: 2em;
}

/* links */
a { color: #00a7ed; text-decoration: none; }
a:visited { color: #00a7ed; }
a:hover { text-decoration: none;}
a:focus { outline: thin dotted; }
/*
a[href^="http"] {
	display: inline-block;
}

a[href^="http"]:after {
	content: "\00A0\23CF";
}
*/
div.wrapper,
div.item {
	position: relative;
	width: 100%;
	/*float: left;*/
}

h2.handle {
	margin: 0;
	display: inline;
	padding-right: 0.5em;
	font-size: 1em;
}

a.pencil,
a.attach, a.detach,
a.associate, a.unassociate {
	margin-left: -34px;
	padding-left: 34px;
	height: 32px;
}

a.pencil {
	background: url(pencil.png) left center no-repeat;
	position: absolute;
	top: 0;
	left: 0;
}

a.attach {
	background: url(plus.png) left center no-repeat;
	position: absolute;
	top: -6px;
	left: -30px;
}

a.associate {
	background: url(plus.png) left center no-repeat;
}

a.detach {
	background: url(minus.png) left center no-repeat;
	position: absolute;
	top: -6px;
	left: 0;
}

a.unassociate {
	background: url(minus.png) left center no-repeat;
}

a.associate, a.unassociate {
	color: inherit;
}

a.associate:hover, a.unassociate:hover {
	background-color: inherit;
	color: inherit;
}

a.pencil span,
a.attach span, a.detach span,
a.associate span, a.unassociate span {
	display: none;
}

/**
 * helpers like .error, .note, .message and such go here
 */
.box {
	position: relative;
	width: 60%;
	background-color: rgb(254, 254, 254);
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 2em 1.5em;
	color: rgba(0,0,0, .8);
	margin: 20px auto;
}


.box:before, .box:after {
	z-index: -1; 
	position: absolute; 
	content: "";
	bottom: 15px;
	left: 10px;
	width: 50%; 
	top: 80%;
	max-width:300px;
	background: rgba(0, 0, 0, 0.7); 
	-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);   
	-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform: rotate(-3deg);    
	-moz-transform: rotate(-3deg);   
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

.box:after {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	right: 10px;
	left: auto;
}

.error, .message {
	font-size: 0.8em;
}

.error {
	background-color: rgb(255, 128, 128);
	color: red;
}

.message {
	background-color: rgb(128, 255, 128);
	color: green;
}

.loadonscroll, .loadonscroll:hover {
	display: block;
	background-color: transparent;
	background-image: url(loader.gif);
	background-position: center center;
	background-repeat: no-repeat;
	height: 48px;
	color: transparent;
	text-decoration: none;
}

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/**
 * restyle form, labels and input
 */
form {
	padding-bottom: 2.33em;
}

form p.help {
	font-size: 0.8em;
	color: rgb(77, 77, 77);
	margin: 0;
}

/* label goes into it's own line, this should improve reading */
label {
	display: block;
	font-weight: bold;
	font-size: 0.8em;
	color: rgb(44, 44, 44);
	cursor: pointer;
}

label.error {
	background-color: inherit;
}

/* input and textareas should be as wide as the form is */
input,
textarea {
	font-family: inherit;
	padding: .2em;
	width: 100%;
	font-size: 1em;
}

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */
textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* automatic width for submit buttons and search fields */
input[type="search"],
input[type="submit"] {
	width: auto;
}

/* hilite the focussed input or textarea */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
textarea:focus
{
    background-color: #feffbc;
}

input[required="required"], textarea[required="required"]
{
	font-size: 1.2em;
	font-weight: bold;
}

/**
 * the last fieldset is (should be) always the one with the buttons
 */
fieldset {
	border: none;
}

/* if we can see, there is no need for a legend, just dump it */
legend {
	display: none;
}

input[type="submit"].default {
	/*margin-top: 1em;*/
	font-family: 'Helvetica Neue', 'Helvetiva', 'Arial', sans-serif;
	font-size: 1em;
	padding: 0.33em;
	width: auto;
	vertical-align: middle;
	background-color: #009ee0;
	color: white;
	border: 0.33em solid #009ee0;
	cursor: pointer;
	-webkit-transform: rotate(-0.7deg);
	-webkit-border-radius: 1em;
	-moz-transform: rotate(-0.7deg);
	-moz-border-radius: 1em;
	float: right;
	font-weight: bold;

	-webkit-animation-name: stillalive;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
}

input[type="submit"].default.delete {
	background-color: red;
	border: 0.33em solid red;
}

@-webkit-keyframes stillalive {
from { opacity: 1; }
50% { opacity: .6; }
to { opacity: 1; }
}

/**
 * table
 */
.table-wrapper {
	padding: 0 64px 0 64px;
}

table {
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

caption {
	padding: 1em;
	font-size: 0.8em;
	color: gray;
}

table thead {
	background-color: gray;
	color: white;
}

th, td {
	position: relative;
	text-align: left;
	padding: 0.33em;
	overflow: hidden;
	white-space: nowrap;
	/*text-overflow: ellipsis;*/
}

.handle {
	width: 0;
	overflow: visible;
}

tbody tr:nth-child(even) {
	background-color: rgb(222, 222, 222);
}

/* @see http://css-tricks.com/examples/TriangleBreadcrumbs/ */
.breadcrumb {
	list-style: none; 
	overflow: hidden; 
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	padding: 0;
}
.breadcrumb li { 
	float: left; 
}
.breadcrumb li a {
	color: gray;
	text-decoration: none; 
	padding: 15px 0 15px 60px;
	background: white;                   /* fallback color */
	position: relative; 
	display: block;
	float: left;
}
.breadcrumb li a:after { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
	border-bottom: 50px solid transparent;
	border-left: 50px solid white; /*hsla(34,85%,35%,1)*/
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	left: 100%;
	z-index: 2; 
}	
.breadcrumb li a:before { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
	border-bottom: 50px solid transparent;
	border-left: 50px solid gray;
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	margin-left: 1px;
	left: 100%;
	z-index: 1; 
}	
.breadcrumb li:first-child a {
	padding-left: 16px;
}

.breadcrumb li:last-child a {
	background: white !important;
	color: gray;
	/*pointer-events: none;*/
	cursor: default;
	max-width: 23.3em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.breadcrumb li:last-child a:after { border: 0; }
/*.breadcrumb li a:hover { background: rgb(45, 45, 45); }*/
/*.breadcrumb li a:hover:after { border-left-color: rgb(45, 45, 45) !important; }*/

div#heartbeat {
	display: none;
	position: absolute;
	top: 0.85em;
	left: 48px;
	margin-left: -0.8em;
	width: 1.5em;
	height: 1.5em;
	background-color: red;
	color: white;
	-webkit-border-radius: 1.5em;
	-webkit-box-shadow: 0 2px .33em rgba(0, 0, 0, .33);
	-moz-border-radius: 1.5em;
	-moz-box-shadow: 0 2px .33em rgba(0, 0, 0, .33);
	line-height: 1.5em;
	font-size: 0.8em;
	font-weight: bold;
	text-align: center;
	z-index: 200;
}

form#loadandcrop div.avatar {
	float: left;
	width: 70%;
}

form#loadandcrop div.upload {
	float: right;
	width: 30%;
}

img#avatar {
}

img.avatar {
	height: 1em;
	width: auto;
	padding-right: 0.33em;
	margin-top: -0.33em;
}

.self img.avatar {
	height: 8em;
	vertical-align: top;
}

span.label {
	padding: 0.33em 0.5em 0.33em 0.5em;
	background-color: #00a7ed;
	color: white;
	-webkit-border-radius: 0.5em 0 0 0.5em;
	-moz-border-radius: 0.5em 0 0 0.5em;
}

span.value {
	/*display: inline-block;*/
	padding: 0.33em 0.5em 0.33em 0.5em;
	background-color: gray;
	color: white;
	-webkit-border-radius: 0 0.5em 0.5em 0;
	-moz-border-radius: 0 0.5em 0.5em 0;
	max-width: 23.3em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left: -0.33em;
}

span.value a {
	color: white;
	background-color: inherit;
}

span.value a:hover {
	
}

/**
 * article item
 */
article.bean {
	margin-top: 1em;
	margin-bottom: 2em;
}
fieldset > article.bean {
	padding: 0;
}
article.bean hgroup {
	margin-bottom: 1em;
	position: relative;
	min-height: 140px;
}

article.bean hgroup h1,
article.bean hgroup h2,
article.bean hgroup h3,
article.bean hgroup h4 {
	margin: 0;
	padding: 0;
	padding-left: 140px;
	
}

article.bean hgroup h4 {
	color: gray;
	font-weight: normal;
	font-style: italic;
}

article.bean hgroup figure {
	position: absolute;
	top: 0;
	left: 0;
	width: 128px;
	margin: 0;
	padding: 0;
}

article.bean hgroup img.avatar {
	width: 128px;
	height: 128px;
	-webkit-mask-image: url(circle.svg);
}

article.bean footer {
	font-size: 0.8em;
	text-align: center;
}

/**
 * list sections with fn label 
 */
section.list {
	margin-bottom: 1.33em;
}
section.list div.fn.label,
section.list div.fn.value {
	/*font-size: 0.9em;*/
	color: white;
}
section.list div.fn.label {
	-webkit-border-radius: 0.5em 0 0 0.5em;
	-moz-border-radius: 0.5em 0 0 0.5em;
	float: left;
	width: 128px;
	overflow: hidden;
	background: #009ee0;
	text-align: right;
	padding: 0.33em 1em 0.33em 0.33em;
}
section.list div.fn.value {
	position: relative;
	background: silver;
	left: 0;
	margin-left: 138px;
	padding: 0.33em 0.33em 0.33em 1em;
	-webkit-border-radius: 0 0.5em 0.5em 0;
	-moz-border-radius: 0 0.5em 0.5em 0;
	margin-bottom: 0.5em;
}

section.list div.fn.value a {
	text-shadow: -1px 1px 0px rgba(255, 255, 255, .33);
}

section.list div.fn.value p:first-child {
	margin-top: 0;
}

section.list div.fn.value:after {
	content: ".";
	color: transparent;
	clear: both;
}

span.flag {
	float: right;
	-webkit-border-radius: 0.5em;
	background: white;
	padding: 0.33em 1em;
	font-size: 0.66em;
}

span.flag a {
	color: rgb(45,45,45);
}
span.flag a:hover {
	background: inherit;
}

section.list div.fn.label.user {
	background-color: orange;
}

/**
 * a record in editor grid view
 */
article.record {
	/*-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;*/
	/*background: rgb(222, 222, 222);*/
	position: relative;
	border-bottom: 1px solid gray;
}

article.record:last-child {
	border-bottom: none;
}

article.record a {
	color: inherit;
}

article.record h1, article.record h2 {
	display: inline-block;
	position: absolute;
	font-size: 1em;
	padding: 12px;
	margin: 0;
	top: 50%;
	height: 0.5em;
	line-height: 1em;
	margin-top: -1em;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: normal;
}

article.record h1 {
	left: 128px;
	width: 480px;
}

article.record.page h1,
article.record.media h1,
article.record.country h1,
article.record.project h1,
article.record.report h1,
article.record.rbac h1,
article.record.rbac_domain h1,
article.record.rbac_role h1,
article.record.rbac_action h1,
article.record.template h1,
article.record.language h1,
article.record.folder h1 {
	left: 40px;
}

article.record h2 {
	right: 52px;
	width: 480px;
	z-index: 1;
	text-align: right;
	padding: 0.8em 1em 0.8em 1em;
	font-size: 0.8em;
	color: white;
	height: auto;
}

article.record div.group {
	width: 128px;
	position: relative;
	left: 0;
}

section.list article.record {
	margin: 0;/* 64px 12px 64px;*/
	padding: 24px 12px 24px 12px;
}

article.record div.group.calendar,
article.record div.group.avatar {
	border: 1px solid gray;
	left: 40px;
	width: 64px;
	/*-webkit-border-radius: 0 0 0.5em 0.5em;*/
}

article.record div.group.avatar {
	border: none;
}

div.calendar .fn {
	text-align: center;
}

.fn.day {
	padding-top: 0.25em;
	font-weight: bold;
}

.fn.month {
	background: -webkit-gradient(linear, 0% 0%, 0% 80%,  from(#666666), to(#666666), color-stop(.6,#333));
	color: white;
	font-size: 0.8em;
	padding: 2px 0 2px 0;
}

.fn.year {
	font-size: 0.8em;
	padding-bottom: .5em;
}

div.group img.avatar {
	width: 64px;
	height: 64px;
	-webkit-mask-image: url(circle-64.svg);
}

/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}